<template lang="">
  <div class="all">
    <div class="block">
      <div class="title"><img src="@/assets/images/appType1.png" /><span>推荐应用</span></div>
      <div class="list">
        <div @click="handleApp(item)" v-for="(item, index) in props.appList" :key="index" class="item">
          <img class="img" :src="item.iconUrl" />
          <div class="title">{{ item.appName }}</div>
        </div>
      </div>
    </div>
    <!-- <div class="block">
      <div class="title"><img src="@/assets/images/appType1.png" /><span>市本级应用</span></div>
      <div class="list">
        <div v-for="(item, index) in getList(1)" :key="index" class="item">
          <img class="img" :src="item.iconUrl" />
          <div class="title">{{ item.appName }}</div>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="title"><img src="@/assets/images/appType1.png" /><span>省建应用</span></div>
      <div class="list">
        <div v-for="(item, index) in getList(2)" :key="index" class="item">
          <img class="img" :src="item.iconUrl" />
          <div class="title">{{ item.appName }}</div>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="title"><img src="@/assets/images/appType1.png" /><span>台州市应用</span></div>
      <div class="list">
        <div v-for="(item, index) in getList(3)" :key="index" class="item">
          <img class="img" :src="item.iconUrl" />
          <div class="title">{{ item.appName }}</div>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="title"><img src="@/assets/images/appType1.png" /><span>第三方应用</span></div>
      <div class="list">
        <div v-for="(item, index) in getList(4)" :key="index" class="item">
          <img class="img" :src="item.iconUrl" />
          <div class="title">{{ item.appName }}</div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script setup>
import { defineProps } from "vue";

const props = defineProps({
  appList: {
    type: Array
  }
});

function getList(type) {
  return props.appList.filter(item => {
    if (item.category === type) {
      return item;
    }
  });
}
const list1 = [
  {
    icon: "appItem1.png",
    title: "常用应用",
    link: ""
  },
  {
    icon: "appItem2.png",
    title: "常用应用",
    link: ""
  },
  {
    icon: "appItem3.png",
    title: "常用应用",
    link: ""
  },
  {
    icon: "appItem4.png",
    title: "常用应用",
    link: ""
  },
  {
    icon: "appItem5.png",
    title: "常用应用",
    link: ""
  },
  {
    icon: "appItem6.png",
    title: "常用应用",
    link: ""
  },
  {
    icon: "appItem7.png",
    title: "常用应用",
    link: ""
  },
  {
    icon: "appItem8.png",
    title: "常用应用",
    link: ""
  }
];
function handleApp(item) {
  window.open(item.url, "_blank");
}
</script>
<style lang="scss" scoped>
.all {
  position: relative;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transform: translateY(-142px);
  .block {
    box-sizing: border-box;
    width: 100%;
    height: 217px;
    padding: 16px 32px;
    margin: 32px 0 0;
    background-color: #ffffff;
    border: 1px solid #e8f2ff;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    .title {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 700;
      color: #2b67b0;
      img {
        width: 30px;
        height: 28px;
        margin-right: 17px;
      }
    }
    .list {
      display: flex;
      margin-top: 33px;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 64px;
        margin-right: 70px;
        cursor: pointer;
        .img {
          width: 64px;
          height: 64px;
          margin-bottom: 8px;
        }
        .title {
          font-size: 14px;
          color: #242424;
        }
      }
    }
  }
}
</style>
